/*
学习目标：文章列表-表单和状态单选框组搭建
1. 准备Form 
2. 准备状态栏
3. 验证收集到数据
 学习目标：搭建频道下拉框
  步骤：1. 准备静态结构Selcte
  2. 准备字段
  3. 收集数据
  学习目标：搭建日期选择控件、以及处理中文国际化
  1. cv控件
  2. 调整内容
  3. 设置中文
  学习目标：获取频道数据，渲染频道列表
  1. 封装API
  2. 挂载后发请求
  3. 声明state
  4. 保存数据
  5. 渲染界面 
   学习目标：获取文章列表数据
  1. API封装
  2. 挂载调用API
  3. 声明state
  4. 保存数据
  5. 渲染界面
  学习目标：完成状态列的渲染
  1. render控制自定义渲染
  2. 筛选对应状态的值
  学习目标：
    1. 处理样式问题
    2. 实现分页请求
    学习目标：分页逻辑代码优化
  1. onChange提取为fn
  2. 将参数优化
  学习目标：筛选表单数据转换
  学习目标：实现筛选查询功能
  1. 改造参数为对象形式
  2. 改造调用方式为传对象
  3. 提交时发请求，查询数据
  4. 修复日期精准度的问题

  学习目标：实现编辑文章的路由跳转
*/ 
import { Breadcrumb, Button, Card, Checkbox, Form, Input, Radio, Select,DatePicker, Table, Space, Tag, Pagination, message, Modal  } from 'antd';
import { EditFilled,DeleteFilled } from '@ant-design/icons';
import { deleteArticleList, getArticleList } from 'api/article';
import { getChannelsList } from 'api/channels';
import errorSrc from "assets/error.png";
import React, { Component, useEffect, useRef, useState } from 'react';
import { Link } from 'react-router-dom';
import Channel from 'components/Channel';
import { useHistory } from 'react-router-dom';
const { Option } = Select;
const { RangePicker } = DatePicker;

export default function ArticleList() {
  const history=useHistory()
  const articleStatus = [
    { id: -1, name: '全部', color: 'magenta' },
    { id: 0, name: '草稿', color: 'orange' },
    { id: 1, name: '待审核', color: 'red' },
    { id: 2, name: '审核通过', color: 'green' },
    { id: 3, name: '审核失败', color: 'cyan' },
  ]
  const columns = [
    {
      // 控制表头文字显示
      title: '封面',
      // 从每行数据的某个字段中，取出数据显示在该列
      // 🔔有dataIndex, 可以省略key
      dataIndex: 'cover',
      // 指定唯一列
      // key: 'cover',
      // render自定义渲染内容
      render: (value)=>{
        // console.log('value  ----->  ', value);
        // if(!value.images.length){
        //   return <img width={100} height={60} src={errorSrc}/>
        // }
        // return <img width={100} height={60} src={value.images[0]} />
        // 简化
        return <img
        src={value.type===0?errorSrc:value.images[0]}
        title={value.title}
        alt={value.title}
          style={{ width: 100, height: 60, objectFit: 'cover' }}
        />
      }
    },
    {
      title: '标题',
      dataIndex: 'title',
    },
    {
      title: '状态',
      dataIndex: 'status',
      render:(value)=>{
        // console.log('value77  ----->  ', value);//2
        const status1=articleStatus.find((item)=>item.id===value)
        return <Tag color={status1.color}>{status1.name}</Tag>
      }
    },
    {
      title: '发布时间',
      dataIndex: 'pubdate',
    },
    {
      title: '阅读数',
      dataIndex: 'read_count',
    },
    {
      title: '评论数',
      dataIndex: 'comment_count',
    },
    {
      title: '点赞数',
      dataIndex: 'like_count',
    },
    {
      title: '操作',
      key:"action",
      render:(value, record, index)=>{
        return( 
        <Space>
          {/* 1. 添加click事件 */}
            {/* 2. 跳转路由，记得传参id */}
          <Button type="primary" shape="circle" icon={<EditFilled />} onClick={()=>history.push('/edit/'+record.id)}/>
          <Button danger shape="circle" icon={<DeleteFilled onClick={()=>handleDelete(record.id)}/>} />
        </Space>)
      }
    },
  ];
  

  const [articleList, setArticleList] = useState({})
  // 1. 改造参数为对象形式
  const getArticle=async(params)=>{
    // 💥 注意：接收参数
    // 将对象改造为两个形参
    const res=await getArticleList(params)
    console.log('res100  ----->  ', res);
    setArticleList(res.data)
  }

  // 分页优化
  const handleChange=(page,pageSize)=>{
    // 2 点击时再次请求数据
    // console.log('----->  ', page,pageSize);
    // 调用时不要传对象
    // 2. 改造调用方式为传对象
     // 3. 当分页时，从ref中取出数据，添加到请求
    console.log('submitRef  ----->  ', submitRef);
    // 2分页时存入数据
    delPageRef.current={page,per_page:pageSize}
    getArticle({page,per_page:pageSize,...(submitRef.current||{})})
  }
  // 删除按钮事件
  const handleDelete=(id)=>{
    Modal.confirm({
      content:'你确定要删除文章吗',
      title:"温馨提示",
      async onOk(){
        await deleteArticleList(id)
    // 重新请求刷新界面 🔔 加回查询参数
    // 3删除成功后，刷新界面时，传入分页数据
    // getArticle({...(submitRef.current||{}),...delPageRef.current||{}})
    const submitData=submitRef.current||{}
    const delPageData=delPageRef.current||{}
    getArticle({...submitData,...delPageData})
    message.success('删除成功',1)
      }
    })
  }
  useEffect(() => {
    // 挂载会发送请求
    // 💥 注意初始参数的问题
    // getArticle({}) // 调用时不要传对象
    getArticle()
  }, [])

  // 1. 创建ref， useRef
  const submitRef=useRef(null)
  const delPageRef=useRef(null)
  
    const handleSubmit=(values)=>{
      console.log('values188  ----->  ', values);
      let formData={...values}
      //   1. 转换status字段的数据
      if(values.status===-1){
        // delete删除对象的某个键
        delete formData.status
      }
      // 是否有日期
      if(values.date){
        // 4. 修复日期精准度的问题
        const startTime=values.date[0].startOf('day').format('YYYY-MM-DD HH:mm:ss')
        const endTime=values.date[1].endOf('day').format('YYYY-MM-DD HH:mm:ss')
        formData.begin_pubdate=startTime
        formData.end_pubdate=endTime
        delete formData.date
      }
      // 2. 转换date字段的数据
      // 3. 验证数据
      console.log('formData  ----->  ', formData);
      // 3. 提交时发请求，查询数据
      getArticle(formData)
      // 2. .current 分配表单数据
      submitRef.current=formData
    }
      return (
        <div style={{paddingTop:24}}>
          <Card title={
            <Breadcrumb>
            <Breadcrumb.Item>
              <Link to='/home'>首页</Link>
            </Breadcrumb.Item>
            <Breadcrumb.Item>文章列表</Breadcrumb.Item>
          </Breadcrumb>
          } bordered={false} >
        <Form
        onFinish={handleSubmit}
        autoComplete="off"
        initialValues={{ status: -1,channel_id:0 }}
      >
        <Form.Item
          label="状态"
          name="status"
        >
          <Radio.Group>
        <Radio value={-1}>全部</Radio>
        <Radio value={0}>草稿</Radio>
        <Radio value={1}>待审核</Radio>
        <Radio value={2}>审核通过</Radio>
        <Radio value={3}>审核失败</Radio>
      </Radio.Group>
        </Form.Item>
        <Form.Item label="频道"
          name="channel_id">
          <Channel style={{ width: 200 }}></Channel>
        </Form.Item>

        <Form.Item label="日期"
          name="date">
          <RangePicker />
        </Form.Item>
        <Form.Item>
          <Button type="primary" htmlType="submit">
            Submit
          </Button>
        </Form.Item>
      </Form>
      根据筛选条件共查询到{articleList.total_count}条数据:
      <Table 
      // columns控制列显示
      columns={columns} 
      // 控制每行数据
      dataSource={articleList.results} rowKey="id"
      pagination={{
        position:['bottomCenter'],
        current:articleList.page,
        pageSize:articleList.per_page,
        total:articleList.total_count,
        // 1获取到点击分页页码
        onChange:handleChange
      }}
      />
      </Card>
        </div>
      );
  
}
